<template>
  <zh-form
    :span="5"
    ref="rolePageFrom"
    :labelCol="labelCol"
    :wrapperCol="wrapperCol"
    :rules="rules"
  >
    <div style="width: 100%; padding: 0 20px">
      <div style="text-align: right" v-if="editFlag === false">
        <ep-button
          icon="add.svg"
          size="small"
          type="primary"
          @click="addMediaInfo"
          >添加
        </ep-button>
      </div>
      <ul class="media-wrap">
        <li v-for="(item, index) in mediaInfoList" :key="index">
          <div class="item special">
            <div class="desc">序号</div>
            <p>{{ item.b0207 }}</p>
          </div>
          <div class="item">
            <div class="desc">媒体类型</div>
            <p>{{ item.b0202Name }}</p>
          </div>
          <div class="item">
            <div class="desc">缩略图</div>
            <template v-if="item.b0202Name === '图片'">
              <img
                v-if="item.b0205"
                :src="fileShowUrl + item.b0205"
                @click="checkImg(item.b0205)"
                alt=""
              />
            </template>
            <template v-if="item.b0202Name === '三维模型'">
              <img
                  v-if="item.b0205"
                  src="@/assets/img/icon-file.png"
                  alt=""
                  @click="view3DModel(item.b0205)"
              />
            </template>
            <template v-if="item.b0202Name === '视频'">
              <video :src="fileShowUrl + item.b0205" controls  style="width: 100%; height: 100px; border-radius: 4px; margin-bottom: 20px;"></video>
            </template>
            <template v-else>
              <img
                v-if="item.b0206"
                :src="fileShowUrl + item.b0206"
                @click="checkImg(item.b0206)"
                alt=""
              />
            </template>
          </div>
          <div class="item">
            <div class="desc">名称</div>
            <p>{{ item.b0203 }}</p>
          </div>
          <div class="item" v-if="item.b0202Name !== '全景'">
            <div class="desc">文件名称</div>
            <p>{{ item.b0205Name }}</p>
          </div>
          <div class="item" v-if="item.b0202Name === '全景'">
            <div class="desc">链接</div>
            <p style="cursor:pointer;color: #00C6FF" @click="clickForLink(item.b0205)">{{ item.b0205 }}</p>
          </div>
<!--          <div class="item" v-if="item.b0202Name === '三维模型'">-->
<!--            <div class="desc">链接</div>-->
<!--            <p style="cursor:pointer;color: #00C6FF" @click="clickForLink(item.b0205)">{{ item.b0205 }}</p>-->
<!--          </div>-->
          <div class="item">
            <div class="desc"></div>
            <div class="btn-wrap">
              <a-button type="link" :disabled="editFlag" @click="editMediaInfo(item, index)">
                编辑
              </a-button>

              <a-button type="link" :disabled="editFlag" @click="deleteMediaInfo(index)" style="margin-left: 15px">
                删除
              </a-button>

              <a-button type="link" :disabled="editFlag" @click="dowloadFile(item)" style="margin-left: 15px">
                下载
              </a-button>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <a-modal
      :title="modalTitle"
      :editFlagToImag="editFlagToMt"
      centered
      style="top: 20px"
      width="50%"
      destroyOnClose
      v-model="visible"
      cancelText="关闭"
      okText="保存"
      @ok="handleForm"
    >
      <mediaInfoItem ref="mediaInfoItem" :editFlag="editFlag" />
    </a-modal>
    <a-modal
        title="三维视图预览"
        centered
        style="top: 20px"
        width="65%"
        destroyOnClose
        v-model="showModelVisible"
        cancelText="关闭"
        :ok-button-props="{ props: { disabled: showModelVisible } }"
    >
      <model-obj :src="modelInfo.url"  />
    </a-modal>
  </zh-form>
</template>

<script>
import {ModelObj} from 'vue-3d-model';
import { fileShowUrl, getBatchDict, fileDownloadUrl } from "@/services/system/api";
import modal from "ant-design-vue/es/modal";
import mediaInfoItem from "@/pages/system/form/mediaInfoItem";
export default {
  name: "pointInfoMediaInfo",
  components: {
    mediaInfoItem,
    ModelObj
  },
  data() {
    return {
      dictData: {},
      modalTitle: "",
      mediaInfoList: [],
      mediaInfoListForDel: [],
      editFlag: true,
      pdfShow: false,
      b0207Num: 0,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      imgUrlList: [],
      visible: false,
      fileList: [],
      b0202Name: "",
      fileShowUrl: fileShowUrl, //预览接口地址
      rules: {
        b0103: [{ required: true, message: "请输入名称" }],
      },
      editIndex: "",
      editFlagToMt:false,//编辑图片时显示序号
      showModelVisible:false,
      modelInfo: {
        url: null
      },
    };
  },
  created() {
    // this.init();
  },
  methods: {
    view3DModel(showId) {
      this.modelInfo.url=this.fileShowUrl + showId;
      this.showModelVisible = true;
    },
    clickForLink(url){
      window.open(url,'_blank')
    },
    dowloadFile(row){
      console.log(row)
      let downloadUrl = fileDownloadUrl
      if(['1','2','4'].indexOf(row.b0202) > -1){
        downloadUrl += row.b0205
      }else if('3' === row.b0202){
        return
      }else {
        downloadUrl += row.b0208
      }
      let a = document.createElement('a');
      a.href = downloadUrl;
      a.click();
    },
    blurB0202Name(row) {
      if (row.b0201) {
        row.flag = "edit";
      }
    },
    // init() {
    //   const params = {};
    //   params.dictFields = "B0202";
    //   this.$http.post(getBatchDict, params).then((res) => {
    //     let resultData = JSON.parse(JSON.stringify(this.dictData));
    //     resultData.B0202 = res.result.B0202;
    //     this.dictData = resultData;
    //   });
    //   this.mediaInfoList.forEach((item) => {
    //     let param = {};
    //     item.fileList = [];
    //     var showId = "";
    //     if (item.b0205) {
    //       showId = item.b0205;
    //     } else {
    //       showId = item.b0206;
    //     }
    //     param.url = this.fileShowUrl + showId;
    //     param.name = showId;
    //     param.showId = showId;
    //     param.fileOrigUrl = showId;
    //     param.uid = showId;
    //     param.status = "done";
    //     param.fileOrigType = "";
    //     param.url = this.fileShowUrl + item.b0205;
    //     item.fileList.push(param);
    //   });
    // },
    getListSize(list) {
      this.b0207Num = 0;
      list.forEach((item) => {
        if (item.b0207 > this.b0207Num) {
          this.b0207Num = item.b0207;
        }
      });
      if (this.b0207Num < list.length) {
        this.b0207Num = list.length;
      }
      this.b0207Num++;
    },
    //新增
    addMediaInfo() {
      this.modalTitle = "新增";
      this.visible = true;
      this.$nextTick(() => {
        this.$refs.mediaInfoItem.editFlag = this.editFlag;
        this.getListSize(this.mediaInfoList);
        this.$refs.mediaInfoItem.b0207Num = this.b0207Num;
        this.$refs.mediaInfoItem.init(null);
      });
    },
    //编辑
    editMediaInfo(row, index) {
      this.modalTitle = "编辑";
      this.editIndex = index;
      this.visible = true;
      this.editFlagToMt=true;
      this.$nextTick(() => {
        this.$refs.mediaInfoItem.editFlag = this.editFlag;
        if (row.b0201) {
          row.flag = "edit";
        }
        this.$refs.mediaInfoItem.init(row);
      });
    },
    //确定
    handleForm() {
      var mediaInfoItem = this.$refs.mediaInfoItem.mediaInfoItem;
      //单独对图片处理
      if (mediaInfoItem.mediaList.length >1&& mediaInfoItem.b0202Name ==='图片'){
        mediaInfoItem.mediaList.forEach((item, index) => {
            const param = {};
            param.b0202="1";
            param.b0202Name = mediaInfoItem.b0202Name;
            param.b0205 = item.showId;
            param.b0205Name = item.name;
            param.b0207=mediaInfoItem.b0207+index;
            param.fileList=[];
            param.mediaList=[];
            param.mediaList.push( item)
            if (this.modalTitle === "新增") {
              param.flag = "save";
              this.mediaInfoList.push(param);
            }
        });
        this.$nextTick(() => {
          this.visible = false;
        });
      }else{
        if (this.modalTitle === "新增") {
          mediaInfoItem.flag = "save";
          this.mediaInfoList.push(mediaInfoItem);
        } else {
          this.mediaInfoList.splice(this.editIndex, 1, mediaInfoItem);
        }
        this.$nextTick(() => {
          this.visible = false;
        });
      }
      this.mediaInfoList.sort((a, b) => {
        const numA = Number(a.b0207) || 0;
        const numB = Number(b.b0207) || 0;
        return numA - numB; // 升序
      });
      console.log(this.mediaInfoList)
    },
    deleteMediaInfo(index) {
      modal.confirm({
        title: "确认删除吗？",
        onOk: () => {
          if (this.mediaInfoList[index].b0201) {
            const item = JSON.parse(JSON.stringify(this.mediaInfoList[index]));
            item.flag = "delete";
            this.mediaInfoListForDel.push(item);
          }
          this.mediaInfoList.splice(index, 1);
        },
        onCancel: () => {},
      });
    },
    checkImg(showId) {
      let url = this.fileShowUrl + showId;
      window.open(url, "_blank");
    },
  },
};
</script>
<style lang="less" scoped>
.media-wrap {
  margin-top: 15px;
  li {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 15px;
    .item {
      flex: 0 0 auto;
      width: 18%;
      .desc {
        width: 100%;
        height: 21px;
        line-height: 21px;
        font-weight: bold;
        margin-bottom: 10px;
      }
      p {
        width: 100%;
        height: 32px;
        line-height: 30px;
        padding: 0 10px;
        border: 1px solid #3e9fc8;
        border-radius: 4px;
        box-sizing: border-box;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .btn-wrap {
        text-align: center;
      }
      img {
        width: auto;
        height: 90px;
        max-width: 98%;
        vertical-align: middle;
        cursor: pointer;
      }
      &.special {
        width: 5%;
      }
    }
  }
}
</style>
